<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>P102 5.4.5 【案例】制作年历</title>
    <style>
        table {
            height: 200px;
            width: 200px;
            font-size: 12px;
            text-align: center;
            float: left;
            margin: 10px;
            font-family: arial;
        }
    </style>
    <script>
        function calendar(y) {
            var w = new Date(y, 0).getDay();
            var html = '';
            for (var m = 1; m <= 12; ++m) {
                html += '<table>';
                html += '<tr><th colspan="7">' + y + '年' + m + '月</th></tr>';
                html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td>';
                html += '<td>五</td><td>六</td></tr>';
                var max = new Date(y, m, 0).getDate();
                html += '<tr>';
                for (var d = 1; d <= max; ++d) {
                    if (w && d == 1) {
                        html += '<td colspan=" ' + w + ' "></td>';
                    }
                    html += '<td>' + d + '</td>';
                    if (w == 6 && d != max) {
                        html += '</tr><tr>';
                    }
                    w = (w + 1 > 6) ? 0 : w + 1;
                }
                html += '</table>';
            }
            return html;
        }
    </script>
</head>

<body>
    <script>
        var year = parseInt(prompt('输入年份:', '2018'));
        document.write(calendar(year));
    </script>
</body>

</html>